<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/page4.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./../font/iconfont.css">
</head>
<body>
    <div class="wrap">
        <div class='header-top fr' id="dingbu">
            <div class="topbar-en fr" style="margin-right:30px;" >
                <a href="#" title="语言">EN</a>
             </div>
            <div class="topbar-service fr" style="margin:0 30px;" >
                <a href="#" title="在线客服"><i class="iconfont">&#xe677;</i></a>
             </div>
            <div class="topbar-cart fr" style="margin-left:30px;">
                <a href="./page5.html" title="购物车"><i class="iconfont">&#xe60a;</i></a>
            </div>
            
            <div class="topbar-user fr">
                <a href="./login.html" title="登入">登入</a>
                &nbsp;或 &nbsp;
                <a href="./login.html" title="注册">注册</a>
                &nbsp;ANTA会员
            </div>
        </div>
        <!-- --------------------第一部分结束 -->
        <div class="header-nav fl">
            <div class="main">
            <div class="header-logo fl">  
                <div class="logo-inner">
                    <a href="./page1.html">
                      <img src="https://img.fishfay.com/theme/images/logo/logo-anta-r-02.svg" alt=""></a>
                </div>
            </div>
            <!-- -------------二级菜单开始 -->
        
         <div class="nav-list fl">
            <ul class="back1">
            <li class="webnav fl">
                <a href="./page3.html" >男子</a>
                <ol class="webnav-box1"> 
                    <li>
                        <dl class="webnav-box2">  
                            <dt class="orange">所有鞋类</dt>
                            <dd>运动鞋 </dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box3">  
                            <dt class="orange">所有服装</dt>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box4">  
                            <dt class="orange">所有配件</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box5">  
                            <dt class="orange">运动项目</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                </ol>
            </li>
            <li class="back1-box1">
                <a href="./page3.html">女子</a>
            </li>
            <li data-type="kids" class="back1-box1">
                <a href="./page3.html" target="_blank" title="儿童">儿童</a>
            </li>
            <li data-type="antakids" class="back1-box1">
                <a href="./page3.html" target="_blank" title="安踏儿童">安踏儿童</a>
            </li>
            <li data-type="culture" class="back1-box1">
                <a href="./page3.html" target="_blank" title="品牌文化">品牌文化</a>
            </li>
            <li data-type="advert" class="back1-box1">
                <a href="./page3.html" target="_blank" title="观赏视频">观赏视频</a>
            </li>
            <li data-type="contact" class="back1-box1">
                <a href="./page3.html" target="_blank" title="联系我们">联系我们</a>
            </li>
         </ul> 
        </div>
           <!-- 搜索框 -->
            <div class="nav-search-box fr">
                    <a class="nav-search-btn" title="搜索"><i class="iconfont">&#xe649;</i></a>
                    <input type="text"  placeholder="搜索" class="nav-search-input">
           </div>
       </div>
    </div>
    <!-- -------------------正式内容----------------- -->
    <div class="main">
        <div class="back2 fl">
            <!-- -------------需要放大镜事件 -->
           
             <div class="magnifier fl">
                <div class='div1'>
                     <!-- <ul class="divul">
                        <li class='border'><img src="https://img.fishfay.com/shopgoods/4/112111103/112111103-4-3/13b46bc2fbb41140d4f32f7f73daaec0.jpg?x-image-process=image/resize,w_800,h_800"></li>
                        <li><img src="https://img.fishfay.com/shopgoods/4/112111103/112111103-4-2/d51163b7e0f98475e2bb374819d1e75e.jpg?x-image-process=image/resize,w_800,h_800"></li>
                        <li><img src="https://img.fishfay.com/shopgoods/4/112111103/112111103-4-5/66e0f9e4e564eff06733d945544e6c4a.jpg?x-image-process=image/resize,w_800,h_800"></li>
                    </ul>
                    <div class='leftbox'>
                        <img src="https://img.fishfay.com/shopgoods/4/112111103/112111103-4-3/13b46bc2fbb41140d4f32f7f73daaec0.jpg?x-image-process=image/resize,w_800,h_800">
                        <div class='mark'></div>
                    </div>
                    <div class="rightbox">
                        <img src="https://img.fishfay.com/shopgoods/4/112111103/112111103-4-3/13b46bc2fbb41140d4f32f7f73daaec0.jpg?x-image-process=image/resize,w_800,h_800">
                    </div>  -->
                </div>
            </div>
           <!---------------放大镜事件结束---------------------->
            <div class="back2-box3 fl">
                <div class="back2-box3a">
                    <!-- <p>篮球鞋</p>
                    <h3>安踏男鞋海沃德2代GH2篮球鞋202111新款</h3>
                    <p>款号：112121103</p>
                    <span>￥649.00</span>  -->
                </div>
                <div class="promos clearfix">
                    <div class="promos-title fl">促销</div> 
                    <div class="promos-content">
                        <a href="javascript:;" title="官方商城全场包邮">
                            官方商城全场包邮
                        </a>
                    </div>
                </div>
                <div class="back2-box4 ">
                    <div class="back2-box4b fl">
                        <img src="https://img.fishfay.com/shopgoods/4/112031101/zt-112031101/2d8e8dfa715e6c72a12e9d52e15fc109.jpg?x-image-process=image/resize,w_300,h_300" alt="" class="ll">
                    </div>
                    <div class="back2-box4b fl">
                        <img src="https://img.fishfay.com/shopgoods/1/112121103/112121103-1-1/87ef84c1edb52e9c05932fc34bd9206a.jpg?x-image-process=image/resize,w_80,h_80" alt=""  class="ll">
                    </div>
                </div>
                <div class="back2-box5 fl">
                    <div class="back2-box5a">
                        
                        <a href="# "><p>尺码：<span>请选择尺码</span>&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont">&#xe607;</i></p></a>
                        <a href="#"><p>数量：<span>请选择数量</span>&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont">&#xe607;</i></p></a>
                       
                    </div>
                    <div class="back2-box5b">
                        <a href="#"><p>领取优惠券&nbsp;&nbsp;&nbsp;&nbsp;<i class="iconfont">&#xe607;</i></p></a>
                    </div>
                    <div class="back2-box6">
                        <div class="back2-box6a fl">
                            <a href="">立即购买</a>
                        </div>
                        <div class="back2-box6b fl">
                            <a  class="addpro">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <div class="main">
        <div class="back3 fl">
            <div class="back3-box1">
                  <p>商品细节</p>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="back4 fl">
              <!-- <div class="back4-box1">
                  <img src="https://img.fishfay.com/shopgoods/1/112121103/wp-112121103-1/7994e5645e67b7947301f7a685904f9b.jpg" alt="">
              </div> -->
        </div>
    </div>
    <!-- ----------------------结尾------------ -->
    <div class="main">
        <div class="back10 fl">
            <div class="ft-slogan fl">
                <img src="https://img.fishfay.com/theme/images/logo/slogan-anta-r.svg" alt="" >
            </div>
           <div class="back10-box">
                   <ul class="back10-box1">
                       <li>安踏海外</li>
                       <li>|</li>
                       <li>安踏投资者关系</li>
                   </ul>
                   <ul class="back10-box2">
                        <li>Copyright(C) 2020 by www.ANTA.com</li>
                        <li>©安踏体育用品有限公司版权所有</li>
                        <li>营业执照</li>
                        <li>开户许可证</li>
                        <li>闽ICP备11020421号</li>
                        <li>闽公网安备35058202000423号</li>
                    </ul>
                    <ul class="back10-box3">
                        <li>安踏儿童</li>
                        <li>|</li>
                        <li>Fila</li>
                        <li>|</li>
                        <li>Kolon Sport</li>
                        <li>|</li>
                        <li>Descente</li>
                        <li>|</li>
                        <li>Sprandi</li>
                        <li>|</li>
                        <li>Kingkow</li>
                    </ul>
           </div>
        </div>
    </div>
     <!-- ------------------------侧边栏--------------- -->
     <div class="web-covers">
        <a href="#dingbu"></a>
        <a href="./page5.html" title="购物车" class="cart"></a> 
    </div> 
</div>
<script src="./js/lib/jquery-1.8.3.js"></script>
<script src="./js/page3.js"></script>
<!-- <script src="./js/fangdajing.js"></script>
    <script>
        //获取大盒子对
        var div1=document.querySelector('.div1')   
        //实例化对象
        new Fang(div1)
        //封装好的之后调用要html的标签一样，css样式的一模一样；否则报错要复制上，
        //可以在上面加其他内容，到时原油封装好的要一模一样加上
    </script> -->


</body>
</html>